<!-- 个人中心 -->
<template>
	<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
		<div class="index">
			<div class="user">
				<div class="user-bg" :style="{height:  innerWidth + 'px'}">
					<van-image class="user-bg-img" :width="innerWidth" :height="innerWidth"
						:src="userInfo ? userInfo.HeadPic : ''">
					</van-image>
					<div class="user-bg-dim"></div>
				</div>
				<div class="title"> 个人中心 </div>
				<van-row type="flex" justify="space-between" class="user-info">
					<van-col class="user-head-portrait">
						<van-image class="user-head-portrait" style="background: #D8D8D8;" width="1.32rem"
							height="1.32rem" round :src="userInfo ? userInfo.HeadPic : ''">
						</van-image>
						<van-image class="isCertification" v-if="isCertification" width="1rem" height="0.44rem"
							:src="certification">
						</van-image>
					</van-col>
					<van-col class="user-name-id">
						<div class="user-name">{{userInfo ? userInfo.MobileNo : '--'}}</div>
						<div class="user-id">ID：{{userInfo ?userInfo.Id :0}}</div>
					</van-col>
					<van-col>
						<div class="user-integral">{{userInfo ? userInfo.GetScores : 0}}</div>
						<div class="user-integral-hint"> 阅读积分 </div>
					</van-col>
				</van-row>
				<div class="leadership" @click="goLeadership">
					<van-image width="100%" height="0.8rem" :src="leadership"></van-image>
				</div>
				<div class="user-bottom"></div>
			</div>
			<div class="read-panel">
				<van-row type="flex" justify="space-between">
					<van-col v-for="item in readImg" :key="item.img">
						<van-image width="2.08rem" height="1.82rem" :src="item.img" @click="item.click"></van-image>
					</van-col>
				</van-row>
			</div>
			<div class="contribute-panel">
				<div class="user-contribute">
					<van-row type="flex" justify="space-between">
						<van-col span="6">
							<div class="column-title">我的投稿</div>
						</van-col>
						<van-col span="18">
							<div class="user-contribute-skip">
								<div class="user-contribute-skip-text" @click="goContributeList">点击投稿</div>
								<van-image width="0.14rem" height="0.24rem" :src="arrowsRight"></van-image>
							</div>
						</van-col>
					</van-row>
				</div>
				<van-row type="flex" justify="space-between">
					<van-col span="6" v-for="(item,index) in contributeInfo" :key="item.hint">
						<div :class="{'user-contribute-info':true, 
							 'user-contribute-info-separation':(index + 1) != contributeInfo.length}">
							<div class="user-contribute-value">{{item.value}}</div>
							<div class="user-contribute-hint">{{item.hint}}</div>
						</div>
					</van-col>
				</van-row>
			</div>
			<div class="server-panel">
				<div class="column-title">我的服务</div>
				<div v-for="item in serverItem" :key="item.name" @click="item.click">
					<van-row type="flex" justify="space-between">
						<van-col span="2">
							<div class="server-item">
								<van-image width="0.4rem" height="0.4rem" :src="item.img"></van-image>
							</div>
						</van-col>
						<van-col span="21">
							<div class="server-item server-item-bb">
								<div class="server-name">{{item.name}}</div>
							</div>
						</van-col>
						<van-col span="1">
							<div class="server-item server-item-bb">
								<van-image width="0.14rem" height="0.24rem" :src="arrowsRight"></van-image>
							</div>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>

		<van-popup v-model="showPopup" position="bottom" :style="{ 'max-height': '5rem','overflow-y':'auto' }">
			<div class="popup">
				<div v-for="item in linkKefu" :key="item" class="contact_tel" @click="dialTel(item)">{{item}}</div>
				<div class="contact_tel contact_cancel" @click="goContact()">取消</div>
			</div>
		</van-popup>

	</van-pull-refresh>
</template>

<script>
	import {
		Toast
	} from 'vant';

	import {
		mapGetters
	} from 'vuex'

	import {
		home_api
	}
	from '../../api/index.js';

	// import Province from '../assets/js/province.js'

	export default {
		name: 'home',
		components: {},
		data() {
			return {
				showPopup: false,
				innerWidth: window.innerWidth > 750 ? 750 : window.innerWidth,
				isLoading: false,
				isCertification: true, //是否实名

				contribute: [{
						hint: '作品数',
						value: ''
					},
					{
						hint: '审核中',
						value: ''
					},
					{
						hint: '已审核',
						value: ''
					},
					{
						hint: '已录用',
						value: ''
					}
				],
				serverItem: [{
						name: '收货地址',
						click: this.goAddress,
						img: require('../../assets/imgs/address.png')
					},
					{
						name: '实名认证',
						click: this.goCertification,
						img: require('../../assets/imgs/about_us.png')
					},
					{
						name: '我的征订',
						click: this.goMyOrder,
						img: require('../../assets/imgs/myorder.png')
					},
					{
						name: '联系客服',
						click: this.goContact,
						img: require('../../assets/imgs/contact_us.png')
					}
				],
				/* 本地图片 */
				certification: require('../../assets/imgs/certification.png'), //实名
				leadership: require('../../assets/imgs/leadership.png'), //领导力中心
				readImg: [{
						click: this.goArticleRanking,
						img: require('../../assets/imgs/hottest.png'), //热门阅读
					},
					{
						click: this.goShareScore,
						img: require('../../assets/imgs/share.png'), //分享积分
					},
					{
						click: this.goCollect,
						img: require('../../assets/imgs/collect.png'), //阅读收藏
					}
				],
				arrowsRight: require('../../assets/imgs/arrowsRight.png'), //箭头右

				//用户信息
				userInfo: this.$store.getters.getUserInfo
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.init()
					this.isLoading = false;
				}, 1000);
			},
			init() {
				this.getWebConfig();
				this.getMyUserInfo();
			},
			getWebConfig() {
				home_api.getWebConfig(res => {
					this.$store.commit('setWebConfig', res)
				});
			},
			getMyUserInfo() {
				home_api.getMyUserInfo(res => {
					console.log(res)
					this.userInfo = res;
					this.$store.commit('setUserInfo', res)
				});
			},
			//去收货地址
			goAddress() {
				this.$router.push('/addresslist')
			},
			//去好文榜单 -- 热门阅读
			goArticleRanking() {
				this.$router.push('/article-ranking')
			},
			//去投稿列表
			goContributeList() {
				this.$router.push('/contribute-list')
			},
			//去实名认证
			goCertification() {
				if (!this.isCertification) {
					this.$router.push('/certification')
				} else {
					Toast('已实名认证通过')
				}
			},
			//去我的征订
			goMyOrder() {
				this.$router.push('/myorder')
			},
			//去分享攒分
			goShareScore() {
				this.$router.push('/share-score')
			},
			//去我的收藏 -- 阅读收藏
			goCollect() {
				// this.$router.push('/collect-list')
			},
			//去联系客服
			goContact() {
				this.showPopup = !this.showPopup;
			},
			//去领导力中心
			goLeadership() {
				this.$router.push('/leadership')
			},
			//拨打电话
			dialTel(tel) {
				this.goContact();
				window.location.href = 'tel:' + tel
			}
		},
		computed: {
			...mapGetters({
				webconfig: 'getWebConfig'
			}),
			linkKefu() {
				//处理联系电话的字符串
				var linkKefu = this.webconfig.LinkKefu;
				if (typeof linkKefu != 'string') return [];
				linkKefu = linkKefu.split(',');
				return linkKefu;
			},
			contributeInfo() {
				let contribute = this.contribute;
				if(this.userInfo.WorksShareInfo){
					//作品数
					contribute[0].value = this.userInfo.WorksShareInfo.AllCount || 0;
					//审核中
					contribute[1].value = this.userInfo.WorksShareInfo.AuditingCount || 0;
					//已审核
					contribute[2].value = this.userInfo.WorksShareInfo.AuditOkCount || 0;
					//已录用
					contribute[3].value = this.userInfo.WorksShareInfo.OkCount || 0;
				}
				return contribute;
			}
		}
	}
</script>

<style scoped>
	.van-pull-refresh {
		min-height: 100vh;
	}

	.van-pull-refresh__track {
		min-height: 100vh;
	}

	.index {
		width: 100%;
		height: 100%;
		padding-bottom: 1rem;
	}

	.user {
		width: 100%;
		background-color: transparent;
		position: relative;
		z-index: 0;
		overflow: hidden;
	}

	.user-bg {
		width: 100%;
		max-height: 750px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -10;
	}

	.user-bg-dim {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.user-bg-img {
		-webkit-filter: blur(8px);
		/* Chrome, Safari, Opera */
		filter: blur(8px);
	}

	.title {
		width: 100%;
		height: 0.62rem;
		font-size: 0.32rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 0.44rem;
		text-align: center;
		padding-top: 0.18rem;
	}

	.user-info {
		margin: 0.32rem 0.4rem 0.54rem;
		height: 1.32rem;
	}

	.user-head-portrait {
		width: 1.32rem;
		height: 1.32rem;
		position: relative;
	}

	.isCertification {
		position: absolute;
		bottom: -0.22rem;
		left: calc(50% - 0.5rem);
	}

	.user-name-id {
		margin: 0 auto 0 0.32rem;
	}

	.user-name {
		font-size: 0.36rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 0.52rem;
		margin-top: 0.18rem;
	}

	.user-id {
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 0.4rem;
	}

	.leadership {
		width: calc(100% - 0.8rem);
		height: 0.8rem;
		margin: 0 0.4rem;
	}


	.user-integral {
		text-align: center;
		font-size: 0.44rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 0.52rem;
		margin: 0.22rem auto 0;
	}

	.user-integral-hint {
		min-width: 1rem;
		text-align: center;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #9e9e9e;
		line-height: 0.34rem;
	}

	.user-bottom {
		width: 100%;
		height: 0.8rem;
		background: #FFFFFF;
		border-radius: 0.4rem 0.4rem 0rem 0rem;
		position: relative;
		bottom: -0.4rem;
	}

	.read-panel {
		width: 100%;
		background: #FFFFFF;
		padding: 0 0.4rem;
		min-height: 100px;
		position: relative;
		z-index: 10;
	}

	.contribute-panel {
		width: 100%;
		background: #FFFFFF;
		position: relative;
		z-index: 10;
	}

	.user-contribute {
		width: 100%;
		padding: 0.4rem 0.4rem 0.34rem;
		height: 1.44rem;
	}

	.column-title {
		text-align: left;
		height: 0.5rem;
		font-size: 0.36rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.5rem;
	}

	.user-contribute-skip {
		text-align: right;
		height: 0.5rem;
		display: flex;
		align-items: center;
		width: 35%;
		margin-left: auto;
	}

	.user-contribute-skip-text {
		font-size: 0.28rem;
		line-height: 0.5rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F7F7F;
		align-items: center;
		margin: 0 0.16rem 0 auto;
	}

	.user-contribute-info {
		width: 100%;
		text-align: center;
		height: 0.9rem;
		position: relative;
	}

	.user-contribute-info-separation::after {
		content: '';
		position: absolute;
		right: 0;
		top: calc(50% - 0.22rem);
		width: 0.02rem;
		height: 0.44rem;
		background: #D8D8D8;
		border-radius: 0.01rem;
	}

	.user-contribute-value {
		width: 100%;
		height: 0.52rem;
		font-size: 0.36rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 0.52rem;
	}

	.user-contribute-hint {
		width: 100%;
		height: 0.4rem;
		font-size: 0.26rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5d5d5d;
		line-height: 0.4rem;
	}

	.server-panel {
		position: relative;
		z-index: 10;
		background: #FFFFFF;
		padding: 0.62rem 0.4rem 0.22rem;
	}

	.server-item {
		height: 1rem;
		padding: 0.3rem 0;
		display: flex;
		align-items: center;
	}

	.server-item-bb {
		border-bottom: 1px solid #F6F5FB;
		padding-left: 0.04rem;
	}

	.server-name {
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.4rem;
	}

	.popup {
		background-color: #FFFFFF;
		/* height: 2.64rem; */
		border-radius: 0.1rem;
		margin: 0 0.22rem;
		margin-bottom: constant(safe-area-inset-bottom);
	}

	.contact_tel {
		width: 100%;
		height: 0.89rem;
		border-bottom: 0.01rem solid #F6F8F4;
		text-align: center;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.88rem;
	}

	.contact_cancel {
		color: #D50000;
		border-bottom: none;
	}
</style>
